<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./helloworld.ts"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>

    <style>
        *{
            margin-top: 20px;

        }

    </style>
</head>
<body>
    <div id="hello">
        <h1>Hello, {{name}}</h1>
        <h1>年龄, {{age}}</h1>
        <h1>当前时间, {{curDate}}</h1>

        <a :href="url">跳转同住</a> <br/>

        单向绑定：<input type="text"  :value="username"/> <br/>
        双向绑定：<input type="text"  v-model="username"/> <br/>
        
        <a @click="show" href="javascript:void(0)">点我，触发时间</a>

        <div @click="showD" style="height: 50px;width: 1000px;background-color: red;">

            <a @click.stop="showA" href="javascript:void(0)">点我，触发时间222</a>

        </div>


        姓：<input type="text"  v-model="xing"/> <br/>
        名：<input type="text"  v-model="ming"/> <br/>
        全名：<span>{{fullName()}}</span>（Method方法效率有点低，不是最优方案） <br/>
        全名：<span>{{fullNameJS}}</span>（计算属性获取，效率高）

        <hr/>
        <h2>今天天气很{{tianqi}}</h2>
        <button @click="updateIsHot">弹出消息</button>
        
        <hr/>
        <h2>当前项目：{{number.projectname}}</h2>
        <h2>当前金额：{{number.projectprice}}万元</h2>
        <button @click="updateProjectPrice">更新价格</button>

        <hr/>
        <h1 v-show="false">测试v-show</h1>
        <h1 v-if="false">测试v-if</h1>

        <hr/>
        <h1>列表渲染</h1>
        搜索条件：<input type="text" v-model="keyname"/>
        <ul>
            <li v-for="(p,index) of filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <hr/>
        <h1 >当前时间为：{{curtime | timeFormatter('YYYY年MM月DD日') | mySlice}}</h1>

        <hr/>
        插值方式：<div>{{htmlstr}}</div>

        v-text方式：
        <div v-text="htmlstr"></div>

        v-html方式：
        <div v-html="htmlstr"></div>

        <hr/>
        渐变：<h1 :style="myopacity">我变!!!</h1>

    </div>

    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true;

        //全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
        
        // 只要vue对象里的data数据发生改变，那么他会作用到页面上
        // 至于页面数据改变会不会作用于data里，那就看是否双向绑定了
        var dd = new Vue({
            el: '#hello',
            data: {
                name : "纪宽2豪",
                age : 27,
                curDate : new Date(),
                url : 'http://www.njtzss.cn/xmgl/frame/fui/pages/themes/breeze/breeze',
                username : '双向绑定',

                xing : "纪",
                ming : "宽豪",
                isHot : true,
                number: {
                    projectprice : 500,
                    projectname : "南京同筑",
                },
                persons: [
                    {id: "001", name: "纪宽豪", age: 21},
                    {id: "002", name: "王欣悦", age: 22},
                    {id: "003", name: "王一雄", age: 23},
                    {id: "004", name: "一休哥", age: 24},
                ],
                keyname: '',
                // filterPersons: [],
                curtime : 1621561377603,
                htmlstr: '<h1>纪宽豪</h1>',
                myopacity : {
                    opacity : 1
                },
            },
            methods: {
                show() {
                    alert(111);
                },
                showD(){
                    alert('showD');
                },
                showA(){
                    alert('showA');
                },
                fullName(){
                    return this.xing + this.ming;
                },
                updateIsHot(){
                    this.isHot = !this.isHot;
                },
                updateProjectPrice(){
                    this.number.projectprice ++;
                },
            },
            computed:{
                // 正常
                fullNameJS:{
                    get(){
                        console.log('fullNameJS');
                        return this.xing + this.ming;
                    }
                },
                // 简写
                tianqi(){
                    return this.isHot ? "寒冷" : "炎热";
                },
                filterPersons(){
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyname) != -1;
                    });
                }
            },
            watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},

                //监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */

                // Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
                // 所以要深度监听
                number: {
                    deep:true,
                    handler(newValue,oldValue){
						console.log('number被修改了',newValue,oldValue)
					}
                },
                // keyname: {
                //     immediate:true, //初始化时让handler调用一下
                //     handler(newValue,oldValue){
				// 		this.filterPersons = this.persons.filter((p) => {
                //             return p.name.indexOf(newValue) != -1;
                //         });
				// 	}
                // }
			},
            filters: {
                timeFormatter(time, formatter){
                    if(!formatter){
                        formatter = 'YYYY-MM-DD HH:mm:ss';
                    }
                    return dayjs(time).format(formatter);
                },

            },
            mounted(){
				console.log('mounted',this)
				setInterval(() => {
					this.myopacity.opacity -= 0.01
					if(this.myopacity.opacity <= 0) this.myopacity.opacity = 1
				},16)
			},

        });
        
        console.log("学习双向绑定的基础。。。。。。。。。。。。。。。。。。。。。。。");

        var age_P = 27;

        var sx = {
            name : "纪宽豪",
            age : age_P
        };

        console.log(sx);

        Object.defineProperty(sx, "age", {

            get: function(){
                console.log('进入了defineProperty getter~~~~');
                return age_P;
            },

            set: function(value){
                console.log('进入了defineProperty setter~~~~');
                age_P = value;
            }

        });


        // dd.$watch('isHot',{
		// 	immediate:true, //初始化时让handler调用一下
		// 	//handler什么时候调用？当isHot发生改变时。
		// 	handler(newValue,oldValue){
		// 		console.log('isHot被修改了',newValue,oldValue)
		// 	}
		// })


        function person(){
            this.name = '1';
            this.age=1;
        }

        var p = new person();


    </script>
    

</body>
</html>